<template>
	<view class="container">
		<view class="content">
			<view class="submit_main" :style="{ paddingBottom: isPay ? '0px' : '140px' }">
				<view class="info">
					<image class="info_left" :src="info.coverImage" mode="aspectFill" />
					<view class="info_right">
						<view class="title">{{ info.goodsName }}</view>
						<view class="date">{{ options.timeStr }}</view>
						<view class="date"></view>
						<view class="price_info">
							<!-- <text class="price">¥ {{ userInfo.userRole == 0 ? info.price : info.fighterPrice }}</text> -->
							<text class="price">{{ options.timePrice ? '￥ ' + options.timePrice : '' }}</text>
							<view class="step_main" v-if="!isPay">
								<image
									src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_decreace.png"
									mode="scaleToFill"
									@click="setNum(-1)"
								/>
								<view class="num">{{ options.person }}位</view>
								<view class="btn_plus" @click="setNum(1)">+</view>
							</view>
							<view v-else>{{ options.person }}位</view>
						</view>
					</view>
				</view>
				<view class="shifu_box" v-if="isPay">
					<text class="left">实付：</text>
					<text class="right">￥{{ options.price }}</text>
				</view>
				<block v-if="!isPay">
					<view class="addr">
						<text>地址：</text>
						<text>{{ info.addressInfo || info.studyAddress }}</text>
					</view>
					<view class="input_maia" v-if="!options.uid">
						<view class="label">机构名称：</view>
						<view class="input">
							<input type="text" v-model="storeName" placeholder="请输入机构名称" />
						</view>
					</view>
					<view class="contact" style="height: 50vh">
						<view class="contact_item" v-for="(t, index) in applicationList" :key="index">
							<view class="index">学员信息{{ index + 1 }}</view>
							<view class="input_main">
								<view class="label">姓名：</view>
								<view class="input">
									<input type="text" v-model="t.name" placeholder="请输入姓名" />
								</view>
							</view>
							<view class="input_main">
								<view class="label">联系方式：</view>
								<view class="input">
									<input type="text" v-model="t.mobile" placeholder="请输入联系方式" />
								</view>
							</view>
							<view class="input_main">
								<view class="label">身份证号：</view>
								<view class="input">
									<input type="text" v-model="t.cardNumber" placeholder="请输入身份证号" />
								</view>
							</view>
							<!-- <view class="input_main">
              <view class="label">所属机构：</view>
              <view class="input">
                <input type="text" v-model="applicationList[index].addressInfo" placeholder="请输入机构名称" />
              </view>
            </view> -->
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="content" v-if="isPay" style="margin-top: 20rpx">
			<view class="submit_main">
				<view class="contact" style="margin: 0">
					<view class="contact_item" style="margin: 0">
						<view class="index">地址信息</view>
						<!-- <view style="margin: 30rpx 0">机构名称：哈哈机构</view> -->
						<view style="margin: 30rpx 0">{{ info.addressInfo || info.studyAddress }}</view>
						<view>联系人：{{ info.studyContacts + ' ' + info.studyMobile }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content" v-if="isPay" style="margin-top: 20rpx; padding-bottom: 140px">
			<view class="submit_main">
				<view class="contact" style="margin: 0">
					<view class="contact_item" style="margin: 0" v-for="(t, index) in applicationList" :key="t.cardNumber">
						<view class="index">学员信息{{ index + 1 }}</view>
						<view style="margin-top: 30rpx">姓名：{{ t.name }}</view>
						<view style="margin: 20rpx 0">身份证号：{{ t.cardNumber }}</view>
						<view style="margin-bottom: 40rpx">联系方式：{{ t.mobile }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fixedbox" v-if="!isPay">
			<view class="moneybox" style="margin-top: 70rpx">
				<view class="label left">应付金额:</view>
				<view class="money">￥{{ options.price }}</view>
			</view>
			<view class="btnok" @click="toSubmit">提交订单</view>
		</view>

		<view class="fixedbox" v-if="isPay && userInfo.userRole > 0">
			<view class="btnok" @click="toSubmit">点击修改</view>
		</view>
	</view>
</template>
<script>
import indexApi from '@/api/yanxue/indexPage'
import { orderBuy, getOrderInfo } from '@/api/yanxue/order'
import { wxPayment } from '@/core/app'
export default {
	data() {
		return {
			registerList: [],
			info: {},
			options: {},
			storeName: '',
			isPay: false,
			userInfo: {},
			applicationList: []
		}
	},
	onLoad(options) {
		this.userInfo = this.$store.state.user.userInfo
		if (options.detailId) {
			this.orderInfo(options.detailId)
			return
		}
		this.options = options
		this.storeName = options?.storeName || ''
		this.options.person = Number(options.person)
		this.setPerson()
		this.getInfo(options.id)
	},
	methods: {
		orderInfo(id) {
			getOrderInfo({ id }).then(res => {
				console.log(res)
				this.isPay = true
				let data = res.result
				this.applicationList = data.memberList.map(x => {
					return {
						name: x.name,
						mobile: x.mobile,
						cardNumber: x.cardNumber
					}
				})
				this.options.timeStr = data.goodsInfo.showTime
				this.options.totalAmount = data.totalAmount
				this.options.price = data.totalPrice
				this.info = data.goodsInfo
				this.options.person = data.totalAmount
				this.options.timePrice = ''
				this.payNum = data.totalPrice
			})
		},
		toSubmit() {
			const app = this
			let dAs = this.applicationList
			if (dAs.some(x => !x.name)) return uni.showToast({ title: '请输入姓名', icon: 'none' })
			if (dAs.some(x => !x.mobile)) return uni.showToast({ title: '请填写联系方式', icon: 'none' })
			if (dAs.some(x => !x.cardNumber)) return uni.showToast({ title: '请输入身份证号', icon: 'none' })
			if (!this.storeName) return uni.showToast({ title: '请输入机构名称', icon: 'none' })
			let cardArr = dAs.map(x => x.cardNumber)
			if (cardArr.length !== new Set(cardArr).size) {
				return uni.showToast({ title: '身份证号重复，请检查', icon: 'none' })
			}
			let obj = {
				amount: this.options.person,
				goodsId: this.options.id,
				orderType: 1,
				applicationList: dAs,
				dateId: this.options.timeId,
				storeName: this.storeName,
				inviteId: this.options.uid ? this.options.uid : undefined
			}
			orderBuy(obj).then(res => {
				wxPayment(res.result.data)
					.then(() => {
						this.orderId = res.result.data.orderId
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							duration: 1500
						})
						this.isPay = true
					})
					.catch(err => app.$error('订单未支付'))
					.finally(() => {})
			})
		},
		setNum(num) {
			if (num == -1 && this.options.person == 1) return
			let pNum = Number(this.options.person) + num
			this.options.person = pNum
			this.options.price = pNum * Number(this.options.timePrice)
			if (num == -1) {
				this.applicationList.pop()
			} else {
				this.applicationList.push({
					name: '',
					mobile: '',
					cardNumber: ''
				})
			}
		},
		getInfo(id) {
			indexApi.projectInfo({ id: id }).then(res => {
				this.info = res.result
			})
		},
		setPerson() {
			for (let i = 0; i < this.options.person; i++) {
				this.applicationList.push({
					name: '',
					mobile: '',
					cardNumber: ''
				})
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	background: linear-gradient(180deg, #c1f26d 0%, #ffffff 100%);
	padding: 20rpx 24rpx;

	.content {
		width: 702rpx;
		background: #ffffff;
		border-radius: 62rpx;
		overflow: hidden;
		// height: 100vh;
		padding: 46rpx;
		.submit_main {
			//   width: 351px;
			margin: 0 auto;
			//   padding: 29px 23px 140px 23px;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 10px;
			.info {
				display: flex;
				align-items: center;
				.info_left {
					width: 100px;
					height: 100px !important;
					border-radius: 20rpx;
					//   margin-right: 13px;
				}
				.info_right {
					margin-left: 10px;
					flex: 1;
					.title {
						font-size: 16px;
						color: #333333;
						font-weight: bold;
						display: -webkit-box;
						-webkit-box-orient: vertical; /* 设置或继承对象的子元素排列方式 */
						-webkit-line-clamp: 1; /* 设置显示的行数 */
						overflow: hidden;
					}
					.date {
						font-family: HarmonyOS Sans SC;
						font-weight: 500;
						font-size: 14px;
						color: #000000;
						margin-top: 20px;
					}
					.price_info {
						display: flex;
						align-items: center;
						margin-top: 10px;
						justify-content: space-between;
						.price {
							font-family: HarmonyOS Sans SC;
							font-weight: bold;
							font-size: 21px;
							color: #000000;
						}
						.step_main {
							display: flex;
							align-items: center;
							margin-left: 20px;
							width: 104px;
							height: 23px;
							background: #efefef;
							border-radius: 12px;
							justify-content: space-between;
							padding: 0 12px;
							image {
								width: 14px;
								height: 14px !important;
							}
							.btn_plus {
								font-size: 14px;
								color: #fff;
								width: 14px;
								height: 14px;
								border-radius: 14px;
								background-color: #f4420a;
								text-align: center;
								line-height: 12px;
							}
							.num {
								font-family: HarmonyOS Sans SC;
								font-weight: 400;
								font-size: 12px;
								color: #000000;
							}
						}
					}
				}
			}
			.shifu_box {
				text-align: right;
				margin-top: 30rpx;
				.left {
					font-family: HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 14px;
					color: #000000;
				}
				.right {
					font-family: HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 24px;
					color: #f4420a;
				}
			}
			.addr {
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 14px;
				color: #000000;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 25px;
			}
			.contact {
				margin-top: 25px;
				// height: 50vh;
				overflow: scroll;
				.contact_item {
					margin-bottom: 20px;
					.index {
						font-family: HarmonyOS Sans SC;
						font-weight: 600;
						font-size: 14px;
						color: #000000;
						display: flex;
						align-items: center;
					}
					.index::before {
						content: '';
						display: inline-block;
						width: 4px;
						height: 19px;
						background: #a2ff00;
						border: 1px solid #a2ff00;
						margin-right: 3px;
					}
					.input_main {
						margin-top: 14px;
						.label {
							font-family: HarmonyOS Sans SC;
							font-weight: 400;
							font-size: 13px;
							color: #000000;
						}
						.input {
							flex: 1;
							margin-top: 15px;
							width: 302px;
							height: 42px;
							background: #e8e8e8;
							border-radius: 21px;
							input {
								height: 42px;
								border-radius: 5px;
								padding: 0 25px;
							}
						}
					}
				}
			}
			.input_maia {
				margin-top: 14px;
				display: flex;
				align-items: center;
				.label {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 13px;
					color: #000000;
				}
				.input {
					flex: 1;
					//   margin-top: 15px;
					width: 302px;
					height: 42px;
					background: #e8e8e8;
					border-radius: 21px;
					input {
						height: 42px;
						border-radius: 5px;
						padding: 0 25px;
					}
				}
			}
		}
	}
	.fixedbox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 240rpx;
		background: #fff;
		z-index: 999;
	}
	.moneybox {
		position: fixed;
		left: 64rpx;
		bottom: 140rpx;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		width: 620rpx;
		background: #fff;
		.money {
			//   width: 222rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 60rpx;
			color: #f4420a;
		}
	}
	.btnok {
		position: fixed;
		left: 52rpx;
		bottom: 64rpx;
		z-index: 9;
		width: 644rpx;
		height: 84rpx;
		background: #f95513;
		border-radius: 42rpx;
		text-align: center;
		line-height: 84rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 84rpx;
	}
}
</style>
